<template>
  <div class="growth-cycle-panel" v-if="isVisible">
    <div class="growth-cycle-panel-back">
      <el-button icon="el-icon-back" @click="twinGoBack">返回</el-button>
    </div>
    <div class="growth-cycle-panel-content">
      <img :src="leftIcon" alt="" class="left-image" @click="leftClick"/>
      <span>{{ centerTxt }}</span>
      <img :src="rightIcon" alt="" class="right-image" @click="rightClick">
    </div>
    <div class="growth-cycle-panel-pop" v-if="isVisiblePopu">
      <div class="growth-cycle-panel-pop-icon">
        <img :src="popuLineIcon" alt=""/>
      </div>
      <div class="growth-cycle-panel-pop-content">
        <span>
          {{ centerRemark }}
        </span>
      </div>
    </div>
  </div>
</template>


<script>
import leftIcon from "@/views/twinScreen/images/growth-cycle-left.png";
import rightIcon from "@/views/twinScreen/images/growth-cycle-right.png";
import popuLineIcon from "@/views/twinScreen/images/popu-line.png";

export default {
  name: 'growthCycle',
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    isVisiblePopu: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      leftIcon,
      rightIcon,
      popuLineIcon,
      centerList: [
        {
          id: 0,
          name: '幼苗期',
          remark: '幼苗期是从水稻种子萌发到移栽前的阶段。这个时期，水稻逐渐长出根系、茎干和叶片。在幼苗期，水稻需要适宜的温度和湿度，以及充足的阳光和营养。在幼苗期后期，需要进行炼苗，以适应移栽后的环境。移栽的时候可以冲施优农帮生根粉或者沾根也可以，能有效促进水稻的根系生长，增加成活率！'
        },
        {
          id: 1,
          name: '分蘖期',
          remark: '分蘖期是从水稻移栽到分蘖盛期的阶段。在这个时期，水稻开始长出分蘖，也就是新的茎干和叶片。分蘖期需要充足的阳光和营养，以及适宜的水分和温度。在分蘖期后期，需要进行烤田，以控制无效分蘖的产生。可以使用优农帮的高氮水溶肥、氨基酸水溶肥叶面喷施，生根粉冲施，增加分蘖，促进根系生长，为后期增产做准备！'
        },
        {
          id: 2,
          name: '拔节期',
          remark: '拔节期是从水稻分蘖盛期到抽穗前的阶段。在这个时期，水稻的茎干和叶片开始迅速生长，同时需要大量的营养和水分。拔节期需要加强肥水管理，以促进水稻的生长和发育！'
        },
        {
          id: 3,
          name: '孕穗期',
          remark: '孕穗期是从水稻抽穗前到抽穗前的阶段。在这个时期，水稻的穗开始形成，需要大量的营养和水分。可以喷施优农帮氨基酸水溶肥加上芸苔素内酯来叶喷！孕穗期需要保持适宜的温度和湿度，以及充足的阳光和营养！'
        },
        {
          id: 4,
          name: '抽穗期',
          remark: '抽穗期是从水稻抽穗到开花前的阶段。在这个时期，水稻的穗部逐渐成熟，茎干和叶片的生长逐渐减缓。抽穗期需要保持适宜的温度和湿度，以及充足的阳光和营养。在抽穗期后期，需要进行排水和烤田，以促进水稻的成熟和干燥！'
        },
        {
          id: 5,
          name: '开花期',
          remark: '开花期是从水稻开花到开花结束的阶段。在这个时期，水稻开始开花并逐渐形成谷粒。开花期需要保持适宜的温度和湿度，以及充足的阳光和营养。在开花期后期，需要进行排水和烤田，以促进水稻的成熟和干燥！'
        },
        {
          id: 6,
          name: '灌浆期',
          remark: '灌浆期是从水稻开花结束到谷粒成熟的阶段。在这个时期，水稻的谷粒开始逐渐饱满起来。这个时候是增产的关键时期，记得用优农帮的磷酸二氢钾100克，搭配芸苔素内酯10毫升，兑水15-30公斤喷施水稻叶面，7-10天喷施一次，直至水稻成熟！灌浆期需要保持适宜的温度和湿度，以及充足的阳光和营养！'
        },
        {
          id: 7,
          name: '成熟期',
          remark: '成熟期是水稻从成熟到收获的阶段。在这个时期，水稻的谷粒已经完全成熟，可以收割了。成熟期需要保持适宜的温度和湿度，以及充足的阳光和营养。在成熟期后期，需要进行排水和烤田，以促进水稻的干燥和提高品质！'
        }
      ]
    };
  },
  computed: {
    centerTxt() {
      const currentItem = this.centerList.find(item => item.id === this.currentId);
      return currentItem ? currentItem.name : '';
    },
    centerRemark() {
      const currentItem = this.centerList.find(item => item.id === this.currentId);
      return currentItem ? currentItem.remark : '';
    },
    currentIndex() {
      return this.centerList.findIndex(item => item.id === this.currentId);
    }
  },
  methods: {
    leftClick() {
      if (this.currentIndex > 0) {
        this.updateCenterTxt(this.currentIndex - 1);
      }
    },
    rightClick() {
      if (this.currentIndex < this.centerList.length - 1) {
        this.updateCenterTxt(this.currentIndex + 1);
      }
    },
    updateCenterTxt(newIndex) {
      this.$emit('update:currentId', this.centerList[newIndex].id);
    },
    twinGoBack() {
      this.$emit('back:click', 0);
    }
  }
};

</script>

<style scoped lang="scss">
.growth-cycle-panel {
  position: absolute;
  left: 387px;
  padding: 8px 24px;
  background: linear-gradient(270deg, rgba(23, 95, 79, 0) 0%, #175F4F 47%, rgba(23, 95, 79, 0) 100%);
  z-index: 1;

  .growth-cycle-panel-pop {
    position: absolute;
    left: 250px;
    top: 170px;

    .growth-cycle-panel-pop-content {
      position: absolute;
      left: 79px;
      top: 0;
      width: 290px;
      border-radius: 5px;
      opacity: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px;
      background: rgba(10, 56, 48, 0.7);
      box-sizing: border-box;
      border: 1px solid rgba(59, 214, 172, 0.6);
      z-index: 1;

      > span {
        font-family: Source Han Sans CN;
        font-size: 16px;
        font-weight: 500;
        line-height: 30px;
        letter-spacing: 2px;
        color: #FFFFFF;
      }
    }

    .growth-cycle-panel-pop-icon {
      position: absolute;
      z-index: 2;
    }
  }

  .growth-cycle-panel-back {
    position: absolute;
    left: 500px;

    > button {
      background: linear-gradient(180deg, rgba(59, 214, 172, 0.7) 0%, rgba(59, 214, 172, 0) 100%);
      border: 1px solid rgba(59, 214, 172, 0.46);
    }
  }

  .growth-cycle-panel-content {
    width: 206px;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .left-image {
      left: 16.01px;
      top: 7px;
      width: 16.01px;
      height: 16px;
    }

    .right-image {
      left: 189.99px;
      top: 7px;
      width: 16.01px;
      height: 16px;
    }

    > span {
      font-family: YouSheBiaoTiHei, sans-serif;
      font-size: 24px;
      font-weight: normal;
      line-height: 30px;
      letter-spacing: 2px;
      color: #FFFFFF;
    }
  }
}
</style>
